<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @ok="handleSubmit"
    @cancel="handleCancel">
    
    <a-card :bordered="false">
      <s-table
        ref="table"
        size="default"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :showPagination="false"
        :rowKey="(record) => record.code"
        :rowSelection="null"
      >
         <span slot="materialModelNumber" slot-scope="text, record">
          {{ record.material ? record.material.materialModelNumber : '' }}
        </span>
        <!-- <span slot="image" slot-scope="text">
							<image-preview :images="text" />
            </span> -->
						<span slot="image" slot-scope="text,record">
				<image-preview1 :images="text" :imageUrl="record.imageUrl" />
			</span>
      </s-table>
    </a-card>
  </a-modal>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";

import {STable} from '@/components'
import {
  page,
} from '@/api/modular/main/emsordermaterial/emsOrderMaterialManage.js'

@Component({
  components: {
    STable,
  }
})

export default class ProductionCenterOrderDetailPlanModal extends Vue {
  @Ref() readonly table!: any
  
  
  visible = false
  title = '退库单详情'
  confirmLoading = false
  queryParam = {
    orderId: '',
    orderType: '',
    pageSize: undefined,
  }
  
  emsOrder = {}
  columns = [
    
    {
      align: 'center',
      title: '产品',
      dataIndex: 'productName',
      customRender: (text, record, index) => record.productName || '/',
      
    },
    {
      align: 'center',
      title: 'BOM',
      dataIndex: 'bomName',
      width: '240px',
      customRender: (text, record, index) => record.bomCode ? `${record.bomCode}(${record.bomName})` : '/',
      ellipsis: false,
    }, {
      title: '物料',
      dataIndex: 'materialName'
    },{
      title: '规格',
      dataIndex: 'materialModelNumber',
      scopedSlots: {customRender: 'materialModelNumber'}
    }, {
      title: '图片',
      dataIndex: 'image',
      scopedSlots: {customRender: 'image'}
      
    }, {
      title: '物号',
      dataIndex: 'materialCode'
    }, {
      title: '关联单号',
      dataIndex: 'orderNumber'
    },
    {
      title: '正常退库数量',
      dataIndex: 'number'
    }, {
      title: '额外退库数量',
      dataIndex: 'extraNumber'
    },
  
  ]
  
  
  // 加载数据方法 必须为 Promise 对象
  loadData(parameter: { pageNo: number, pageSize: number }) {
    const params = {
      ...parameter,
      ...this.queryParam,
    }
    return page(params).then((res) => {
      return res.data
    })
  }
  
  show(record) {
    this.visible = true
    this.emsOrder = record
    this.queryParam.orderId = record.orderId
    this.queryParam.pageSize = -1
    
    setTimeout(() => {
      this.handleOk()
    }, 100)
  }
  
  
  handleOk() {
    this.table.refresh()
  }
  
  handleSubmit() {
    this.visible = false
  }
  
  handleCancel() {
    this.visible = false
  }
  
  
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
